<template>
  <div class="fjgl cardflex">
    <div class="card">
      <a-form layout="inline" label-width="200">
        <a-form-item label="房间号" name="roomNo">
          <a-input v-model:value="formState.roomNo"></a-input>
        </a-form-item>
        <a-form-item label="类型" name="roomType">
          <h-select
            v-model:value="formState.roomType"
            name="room_type"
          ></h-select>
        </a-form-item>
        <a-form-item label="楼层" name="floor">
          <h-select v-model:value="formState.floor" name="floor"></h-select>
        </a-form-item>
        <a-form-item label="明窗" name="isWindow">
          <h-select
            v-model:value="formState.isWindow"
            name="boolean"
          ></h-select>
        </a-form-item>
        <a-form-item label="把边" name="isSide">
          <h-select v-model:value="formState.isSide" name="boolean"></h-select>
        </a-form-item>
        <a-form-item>
          <a-button @click="resetFields">重置</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="card100 card">
      <div style="margin-bottom: 20px">
        <a-button
          style="display: block; margin-left: auto"
          @click="handleOpenModal('新建')"
          >新建</a-button
        >
      </div>
      <a-table
        rowKey="roomId"
        :dataSource="filterTableState"
        :columns="tableState.columns"
        :pagination="false"
      >
        <template #action="{ record }">
          <a-button type="link">删除</a-button>
          <a-button type="link" @click="handleOpenModal('编辑', record)"
            >编辑</a-button
          >
        </template>
        <template #window="{ record }">{{
          record.isWindow ? "是" : "否"
        }}</template>
        <template #side="{ record }">{{
          record.isSide ? "是" : "否"
        }}</template>
      </a-table>
    </div>
  </div>
  <a-modal v-bind="modalState">
    <div>
      <a-form>
        <a-form-item label="房间号" v-bind="modalValidateInfos.roomNo">
          <a-input v-model:value="modalModelRef.roomNo"></a-input>
        </a-form-item>
        <a-form-item label="类型" v-bind="modalValidateInfos.roomTypeId">
          <h-select
            v-model:value="modalModelRef.roomTypeId"
            name="room_type"
          ></h-select>
        </a-form-item>
        <a-form-item label="楼层" v-bind="modalValidateInfos.floorId">
          <h-select
            v-model:value="modalModelRef.floorId"
            name="floor"
          ></h-select>
        </a-form-item>
        <a-form-item label="标签">
          <h-select
            mode="tags"
            v-model:value="modalModelRef.tags"
            name="room_tag"
          ></h-select>
        </a-form-item>
        <a-form-item label="把边" v-bind="modalValidateInfos.isSide">
          <h-select
            v-model:value="modalModelRef.isSide"
            name="boolean"
          ></h-select>
        </a-form-item>
        <a-form-item label="有窗" v-bind="modalValidateInfos.isWindow">
          <h-select
            v-model:value="modalModelRef.isWindow"
            name="boolean"
          ></h-select>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import HSelect from "@/components/HSelect";
import { computed, reactive, ref, UnwrapRef } from "vue";
import { getRoomList, insertRoom } from "@/api";
import { useModalState } from "@/utils/modalState";
import { useForm } from "ant-design-vue/es/form";

const tableState: UnwrapRef<{
  columns: Array<unknown>;
  dataSource: Array<{ [propName: string]: unknown }>;
}> = reactive({
  columns: [
    {
      title: "房间号",
      dataIndex: "roomNo",
    },
    {
      title: "类型",
      dataIndex: "roomTypeName",
    },
    {
      title: "楼层",
      dataIndex: "floorName",
    },
    {
      title: "标签",
      dataIndex: "roomTagNames",
    },
    {
      title: "把边",
      dataIndex: "isSide",
      slots: { customRender: "side" },
    },
    {
      title: "有窗",
      slots: { customRender: "window" },
      key: "isWindow",
    },
    {
      title: "操作",
      key: "action",
      slots: { customRender: "action" },
    },
  ],
  dataSource: [],
});
getRoomList().then((res) => {
  tableState.dataSource = res.data;
});
const filterTableState = computed(() => {
  return tableState.dataSource.filter((r) => {
    if (formState.roomNo && formState.roomNo !== r.roomNo) {
      return false;
    } else if (formState.roomType && formState.roomType !== r.roomTypeId) {
      return false;
    } else if (formState.floor && formState.floor !== r.floorId) {
      return false;
    } else if (formState.isWindow && formState.isWindow != r.isWindow) {
      return false;
    } else if (formState.isSide && formState.isSide != r.isSide) {
      return false;
    } else {
      return true;
    }
  });
});
const formState = reactive({
  roomNo: "",
  roomType: "",
  floor: "",
  isWindow: "",
  isSide: "",
});
const { resetFields } = useForm(formState, reactive({}));
//弹出框
let modalModelRef = ref({
  roomId: "",
  roomNo: "",
  tags: [],
  roomTypeId: "",
  floorId: "",
  isSide: "",
  isWindow: "",
});
const modalRuleRef = reactive({
  roomNo: [{ required: true, message: "房间号不能为空" }],
  roomTypeId: [{ required: true, message: "房间类型不能为空" }],
  floorId: [{ required: true, message: "楼层不能为空" }],
  isSide: [{ required: true, message: "请选择是否靠窗" }],
  isWindow: [{ required: true, message: "请选择是否把边" }],
});

let { validateInfos: modalValidateInfos, resetFields: modalResetFields } =
  useForm(modalModelRef.value, modalRuleRef);
/**
 *
 */
const validate = async () => {
  const { validate, validateInfos, resetFields } = useForm(
    modalModelRef.value,
    modalRuleRef
  );
  modalValidateInfos = validateInfos;
  modalResetFields = resetFields;
  if (await validate()) {
    await insertRoom(modalModelRef.value);
    getRoomList().then((res) => {
      tableState.dataSource = res.data;
    });
    return true;
  } else {
    return false;
  }
};

const { modalState, openModal } = useModalState(validate, modalResetFields);
const handleOpenModal = (type: string, record: any) => {
  modalResetFields();
  if (record) {
    record = JSON.parse(JSON.stringify(record));
    record.tags = record.roomTagIds
      ? record.roomTagIds.split(";").map(Number)
      : [];
    modalModelRef.value = record;
  }
  openModal(type);
};
</script>
<style scoped lang="less">
.fjgl {
  :deep(.ant-select-selector) {
    width: 150px;
  }
}
</style>
